<template>
  <div class="app-container">
    <div class="el-toolbar">
      <div class="el-toolbar-body" style="justify-content: flex-start;">
        <el-button type="primary" icon="el-icon-download" @click="exportDict" plain>导出数据</el-button>
        <el-upload style="float: left" class="upload-demo" action="http://localhost:8202/admin/cmn/dict/importData" :on-success="onUploadSuccess" :multiple="false">
          <el-button type="primary" icon="el-icon-upload2" plain>导入数据</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过500kb</div>
        </el-upload>
      </div>
    </div>
    <el-table :data="dictList" style="width:100%" row-key="id" border lazy :load="getChildrens" :tree-props="{children:'children',hasChildren:'hasChildren'}">
      <el-table-column label="名称" width="230" align="left">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="编码" width="220">
        <template slot-scope="{row}">
          {{row.dictCode}}
        </template>
      </el-table-column>
      <el-table-column label="值" width="230" align="left">
        <template slot-scope="scope">
          <span>{{scope.row.value}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import dict from "@/api/dict";
export default {
  name: 'List',
  data(){
    return{
      dictList:[]
    }
  },
  methods:{
    //获取数据字典列表
    getDictList(id) {
      dict.getDictList(id)
      .then(result => {
        this.dictList=result.data
      })
      .catch(error => {
        this.$message.error('抱歉，获取数据字典列表失败，请与IT管理员联系');
      });
    },
    //获取数据字典的子节点数据
    getChildrens(tree, treeNode, resolve){
      setTimeout(() => {
          dict.getDictList(tree.id).then(result => {resolve(result.data)})
        }, 500)
    },
    //下载数据字典到excel
    exportDict(){
      window.location.href = 'http://localhost:8202/admin/cmn/dict/exportData'
      this.$message({
        message: '恭喜你，导出成功',
        type: 'success'
      });
    },
    //上传成功后调用的方法
    onUploadSuccess(){
      this.getDictList(1)
    }
  },
  created() {
    this.getDictList(1)
  }
}
</script>

<style scoped>

</style>
